<template>
  <div id="view">
    <section id="sec1">
      <p class="p1">多样化算力产品自由选择</p>
      <p class="p2">行业内率先实现算力资产基于公链的去中心化管理</p>
    </section>
    <section id="sec2">
      <span class="hoverhand" :class="machineIndex === 0 ? 'active' : ''" @click="machineType(0)" id="jd">经典算力</span>
      <span class="hoverhand" :class="machineIndex === 1 ? 'active' : ''" @click="machineType(1)">加速产出算力</span>
      <span class="hoverhand" :class="machineIndex === 2 ? 'active' : ''" @click="machineType(2)">IPFS</span>
    </section>
    <section id="sec3" class="machineList">
      <div class="w1200">
        <p class="p1">
          <span class="middle">实时BTC算力指数 {{indexNumber}} CNY/T*天</span>
          <img src="../common/imgs/noticeYellow.png" alt="" class="middle hoverhand" id="noticeYellow" @click="modalClass = 'modal-show'">
        </p>
        <ul class="classicList" v-if="machineIndex === 0">
          <li v-for="(item , index ) in machineList">
            <div class="floatleft left">
              <p class="p1">
                <img src="../common/imgs/btc.png"  alt="btc" class="middle">
                <img src="../common/imgs/BHP.png" v-if="item.bhp_power > 0" alt="bhp" class="middle" style="margin-left: 5px;">
                <span class="middle name">{{item.name}}</span>
<!--                <span class="lockDays mark" v-if="Number(item.type) == 10 || Number(item.type) == 11">不可回购</span>-->
                <span class="lockDays mark">锁定期{{item.regular_date_num}}天</span>
                <span class="lockDays mark" v-if="Number(item.type) == 11">不包电费</span>
              </p>
              <div class="c_detail">
                <div>
                  <p class="title">单份BTC算力</p>
                  <p class="message">{{item.base_power}}T{{item.more_power_percent > 0 ? '+'+item.more_power_percent+'%' : '' }}</p>
                </div>
                <div>
                  <p class="title">日挖矿产出</p>
                  <p class="message">约{{item.predict_income}}CNY/T</p>
                </div>
                <div>
                  <p class="title">剩余算力</p>
                  <p class="message">{{item.left_power}}T</p>
                </div>
              </div>
              <div class="c_detail">
                <div>
                  <p class="title">单次下单限额</p>
                  <p class="message">{{item.maxLimitNum}}T</p>
                </div>
                <div>
                  <p class="title">发放方式</p>
                  <p class="message">日结，次日发放至账户</p>
                </div>
                <div>
                  <p class="title">开挖时间</p>
                  <p class="message">{{item.time_income}}</p>
                </div>
              </div>
            </div>
            <div class="floatleft right" :class="item.num_left <= 0 ? 'sellOver' : ''">
              <p class="p1">
                <span class="floatleft">单份价格</span>
                <a href="javascript:void 0;" v-if="Number(item.num_left) <= 0"  class="floatright">查看详情 ></a>
                <router-link v-if="Number(item.num_left) > 0" :to="{path : '/classicMachineDetail' , query:{ machine_id : item.machine_id}}" class="floatright">查看详情 ></router-link>
              </p>
              <p class="p2">
                <span>{{item.cnyPrice}}CNY</span>
              </p>
              <p class="p3">
                <span v-if="item.usdtPrice">≈ {{item.usdtPrice}}USDT</span>
              </p>
              <a href="javascript:void  0;" @click="openDialog(
                {path : '/classicMachinePay' , query:{ machine_id : item.machine_id}, bhp_power : item.bhp_power,num_left : item.num_left})" class="goBuy">立即购买</a>
            </div>
          </li>
        </ul>
        <ul class="hignWaveList" v-if="machineIndex === 1">
          <li v-for="(item , index ) in machineList">
            <div class="floatleft left">
              <p class="p1">
                <img src="../common/imgs/btc.png"  alt="btc" class="middle">
                <img src="../common/imgs/BHP.png" v-if="item.bhp_power > 0" alt="bhp" class="middle" style="margin-left: 5px;">
                <span class="middle name">{{item.name}}</span>
<!--                <span class="lockDays mark" v-if="Number(item.type) == 10 || Number(item.type) == 11">不可回购</span>-->
                <span class="lockDays mark">合约期{{item.regular_date_num}}天</span>
                <span class="lockDays mark" v-if="Number(item.type) == 11">不包电费</span>
<!--                <span class="lockDays mark">产出保障</span>-->
              </p>
              <div class="c_detail">
                <div>
                  <p class="title">单份BTC算力</p>
                  <p class="message">{{item.base_power}}T{{item.more_power_percent > 0 ? '+'+item.more_power_percent+'%' : '' }}</p>
                </div>
                <div>
                  <p class="title">单份BHP参配算力</p>
                  <p class="message">{{item.bhp_power}}T</p>
                </div>
                <div>
                  <p class="title">剩余算力</p>
                  <p class="message">{{item.leftPower}}T</p>
                </div>
                <div>
                 <p class="title">开挖时间</p>
                 <p class="message">{{item.time_income}}</p>
                </div>
              </div>
              <div class="c_detail">
                <div>
                  <p class="title">日挖矿产出</p>
                  <p class="message">{{item.predict_income}}CNY/份</p>
                </div>
<!--                <div>-->
<!--                  <p class="title">预估产出率</p>-->
<!--                  <p class="message">{{item.incommon_rate_min}}% ~ {{item.incommon_rate_max}}%</p>-->
<!--                </div>-->
                <div v-if="item.electric_price">
                  <p class="title">合约电价</p>
                  <p class="message">{{Number(item.electric_price.CNY)+'CNY ≈ '+Number(item.electric_price.USDT)+'USDT/度'}}</p>
                </div>
              </div>
            </div>
            <div class="floatleft right" :class="item.num_left <= 0 ? 'sellOver' : ''">
              <p class="p1">
                <span class="floatleft">单份价格</span>
                <a href="javascript:void 0;" v-if="Number(item.num_left) <= 0"  class="floatright">查看详情 ></a>
                <router-link v-if="Number(item.num_left) > 0" :to="{path : '/fastMachineDetail' , query:{ machine_id : item.machine_id}}" class="floatright">查看详情 ></router-link>
              </p>
              <p class="p2">
                <span>{{item.cnyPrice}}CNY</span>
              </p>
              <p class="p3">
                <span v-if="item.usdtPrice">≈ {{item.usdtPrice}}USDT</span>
              </p>
              <a href="javascript:void  0;" @click="openDialog({path : '/fastMachinePay' ,
                  query:{ machine_id : item.machine_id}, bhp_power : item.bhp_power,num_left : item.num_left})" class="goBuy">立即购买</a>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <div :class="modalClass" @click="hideNoticeWin" id="noticeWin">
      <div id="content" @click.stop="">
        <p class="textCenter">
          <span class="middle">实时BTC算力指数</span>
          <span class="closeNoticeWin hoverhand" @click="hideNoticeWin">
            <i>
              <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
            </i>
          </span>
        </p>
        <div class="noticeBody">
          <p>算力指数=每T算力产币量*实时币价</p>
          <p>每T算力产币量：取RRM公示的最新每T算力实际产币量（分币比例不计算在内）</p>
          <p>实时币价：取币安、OKcoin、火币三大交易所均值，10s更新一次</p>
        </div>
      </div>
    </div>
    <dialog-iknow ref="digIknow" titles="提示" confirmBtn="我知道了"/>
  </div>
</template>
<script>
  import { btcMathIndex, indexData2 , ipfsAddress ,bhpayMes} from '../http/api';
  export default {
    name : 'machinemarket',
    data(){
      return{
        modalClass : 'modal-hide',
        machineIndex : 0, //选择矿机index
        indexNumber : '' , //算力指数
        machineList  : [],//矿机列表
        openBhpay : false,//是否关联bhpay
      }
    },
    components: {
      dialogIknow : resolve => { require(['../components/DialogIknow'], resolve) },
    },
    created() {
      this.setHeaderLinkStyle();
    },
    mounted() {
      function getUrlKey(name , url){
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null;
      }
      let type = getUrlKey("type", window.location.href) || null;//判断是否有 type
      if(type){
        this.machineIndex = Number(type) - 1;
      }
      let machineIndex = this.machineIndex;
      if( machineIndex === 0 || machineIndex === 1){
        this.getList();
      } else if(machineIndex === 2){
        this.toIpfs();
      }
      let thiz = this;
      var https = [
        btcMathIndex({noLoading : true}).then(res => {
          this.indexNumber = res.data.index;
        })
      ];
      this.PromiseAll(https);
    },
    methods:{
      openDialog(param){
        if(Number(param.num_left <= 0)){
          return;
        }
        let thiz = this;
        if( !(this.$store.state.uid)){
          require('../common/js/toast').toast('该操作需要登录');
          this.$router.push({path : '/login'});
          return;
        }
        if(Number(param.bhp_power > 0)){
          bhpayMes({noToast : true}).then( res => {
            if( res.code == 200 ){
              thiz.$router.push(param);//已绑定bhpay
            }else{
              let html = '<div style="line-height: 170%;font-size: 18px">应平台合规需要，BTC_BHP合约产出的BHP，已在<span style="color: #ffd203">2019年12月30日</span>迁移到BHPay钱包中发放，为确保您的产出正常发放，请下载APP完成BHPay账户关联。</div>';
              this.$refs.digIknow.changeContent(html);
              this.$refs.digIknow.dialogShow();
            }
          });
        } else{
          thiz.$router.push(param);//已绑定bhpay
        }
      },
      getList(){
        let machineIndex = this.machineIndex;
        let return_type = machineIndex === 0 ? 1 : 2;
        let thiz = this;
        indexData2({ return_type : return_type }).then(res => {
          let list = res.data.list;
          thiz.for( list , (item , index) => {
            item.left_power = thiz.accMul(item.num_left , item.base_power);//剩余算力
            thiz.for( item.good_deposit , ( deposit , i ) => {
              let name = deposit.pay_currency === 'CNY' ? 'cny' : 'usdt';
              item[name + 'Price'] = deposit.goods_deposit; //单价
            });
            if(thiz.machineIndex === 1){
              item.leftPower = thiz.accMoreMul(item.num_left , item.base_power);
              let predict_income_level = item.predict_income_level;
              item.incommon_rate_min = thiz.accMoreMul(predict_income_level[0].income_rate , 100);
              item.incommon_rate_max = thiz.accMoreMul(predict_income_level[predict_income_level.length - 1].income_rate , 100);
            }
          });
          thiz.machineList = list;
        });
      },
      machineType( index ){
        if( this.machineIndex != index){
          this.machineIndex = index;
          if(index != 2){
            this.getList();
          }else{
            this.toIpfs();
          }
        }
      },
      toIpfs(){
        //ipfs
        ipfsAddress().then(res => {
          if(res.code == 200){
            window.location.href = res.data.uri;
          }
        });
      },
      setHeaderLinkStyle(){
        let rrm_header = document.querySelector('#rrm_header');
        let thiz = this;
        if( !rrm_header ){
          this.timeout(function () {
            thiz.setHeaderLinkStyle();
          },50);
          return;
        }
        let ul = rrm_header.querySelector('.routers');
        let li = ul.querySelectorAll('li')[1];
        let curLink = li.querySelector('a');
        curLink.classList.add('active');
      },
      hideNoticeWin(){
        this.modalClass = 'modal-hide';
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  @import "../common/style/animate.css";
  #noticeWin{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    #content{
      width: 520px;margin-left: -250px;left: 50%;top: 50%;height: 227px;
      overflow:hidden;background: #f0f2f5;.borderRadius;position: absolute;margin-top: -114px;
      >p{
        text-align: center;.bgYellow;height: 49px;color: #000;font-size: 14px;position: relative;
        >span{
          height: 49px;display: inline-block;padding-top: 16px;
          /*>i{*/
          /*  display: list-item;list-style: none;*/
          /*}*/
        }
        >.closeNoticeWin{
          height: 100%;display: inline-block;width: 49px;color: rgba(0,0,0,.45);position: absolute;right: 0;top:0;line-height: 54px;
          &:hover{
            color: rgba(0,0,0,.75);
          }
        }
      }
      >div{
        padding: 24px;color: #898989;font-size: 14px;height: 178px;overflow: hidden;
        >p{
          margin-bottom: 14px;line-height: 150%;
        }
      }
    }
  }
  #sec1{
    height: 310px;padding-top: 72px;color: #fff;text-align: center;
    background: url("../common/imgs/mhBg.jpg") top center no-repeat;background-size: 1920px 100%;
    .p1{
      font-size: 36px;padding-top: 78px;
    }
    .p2{
      font-size: 20px;color: rgba(255, 255, 255, 0.5);padding-top: 14px;
    }
  }
  #sec2{
    text-align: center;background: #fff;
    >span{
      .colorGrey;padding: 22px 0;display: inline-block;margin-right: 256px;position: relative;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        .colorYellow;
        &:after{
          content: '';display: inline-block;width: 100%;position: absolute;z-index: 1;left: 0;bottom: 0;height: 3px;.bgYellow;
        }
      }
      &:hover{
        .colorYellow;
      }
    }
  }
  .machineList{
    padding-top: 30px;padding-bottom: 147px;
    >div>.p1{
      background: #FFF4E4;height: 40px;.textCenter;.colorYellow;font-size: 16px;
      >span{
        line-height: 40px;
      }
      >#noticeYellow{
        width: 18px;height: 18px;margin-left: 5px;
      }
    }
    ul{
      >li{
        display: block;width: 100%;.overHidden;height: 242px;margin-top: 22px;background: #FAFAFA;
        &:first-child{
          margin-top: 0;
        }
        >.left{
          width: 875px;background: #fff;height: 100%;padding-left: 29px;padding-top: 29px;
          .p1{
            font-size: 0;
            >img{
              width: 26px;height: 26px;
            }
            >.name{
              font-size: 22px;color: #262626;padding-left: 14px;
            }
            >.mark{
              background: #FFF6EC;.borderRadius;.colorYellow;height: 21px;display: inline-block;line-height: 21px;font-size: 12px;
              padding: 0 7px;margin-left: 11px;vertical-align: middle;
            }
          }
          >.c_detail{
            .overHidden;padding-top: 42px;
            >div{
              float: left;width: 203px;
              .title{
                color: #999;font-size: 14px;
              }
              .message{
                color: #595959;font-size: 16px;padding-top: 17px;
              }
            }
            &:nth-child(3){
              padding-top: 27px;
            }
          }
        }
        >.right{
          padding: 27px 38px;padding-bottom: 0;background: #FAFAFA;width: 325px;height: 100%;
          >.p1{
            .overHidden;
            >span{
              color: #999;font-size: 14px;
            }
            >a{
              .colorYellow;font-size: 14px;
            }
          }
          >.p2{
            color: #595959;font-size: 24px;padding: 18px 0;
          }
          >.p3{
            color: #999;font-size: 14px;height: 15px;
          }
          >.goBuy{
            .submit;height: 42px;line-height: 42px;font-size: 16px;margin-top: 60px;
          }
        }
        >.sellOver{
          background: url("../common/imgs/sellOver.png") 211px 60px no-repeat; background-size: 95px auto;
          > .p1 > a{
            color: #CFCFCF;
          }
          > .goBuy{
            background: #CFCFCF;
            &:hover{
              background: #CFCFCF;
            }
          }
        }
      }
    }
  }
</style>
